<template>
	<div class="content">
		<Crumbs :item="crumbsItem" @crumbsClick="crumbsClick"></Crumbs>
		<div class="dailyPra" v-if="show == 1">
			<div class="newsDetailTop">
				<img v-if="details.avatar" :src="details.avatar" />
				<div>
					<h3>{{ details.userName }}</h3>
					<span>
						您已经连续打卡
						<i class="org">{{ details.continueDays }}</i>
						天
					</span>
				</div>
			</div>
			<!-- 数据分析 -->
			<div class="dailyAnaly">
				<div class="popGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_leijidaka"></i>
						累计打卡
					</div>
					<div class="dailyAnalyNum">{{ details.totalDays }}</div>
					<i class="iconfont icon-dakajieguo_leijidaka iconBg"></i>
				</div>
				<div class="blueGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_cuotishuyidati"></i>
						已答题
					</div>
					<div class="dailyAnalyNum">{{ details.queCou }}</div>
					<i class="iconfont icon-dakajieguo_cuotishuyidati iconBg"></i>
				</div>
				<div class="orgGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_zhengqueshuai"></i>
						正确率
						<span>(%)</span>
					</div>
					<div class="dailyAnalyNum">{{ details.rightRate }}</div>
					<i class="iconfont icon-dakajieguo_zhengqueshuai iconBg"></i>
				</div>
			</div>
		</div>

		<div class="dailyPra" v-if="show == 2">
			<div class="newsDetailTop">
				<img v-if="details.avatar" :src="details.avatar" />
				<div>
					<h3>{{ details.userName }}</h3>
				</div>
			</div>
			<!-- 数据分析 -->
			<div class="dailyAnaly">
				<div class="popGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_haoshi"></i>
						耗时
					</div>
					<div class="dailyAnalyNum">{{ transcript.duration1 }}</div>
					<i class="iconfont icon-dakajieguo_haoshi iconBg"></i>
				</div>
				<div class="blueGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_cuotishuyidati"></i>
						错题数
					</div>
					<div class="dailyAnalyNum">{{ transcript.totalErrorCount }}</div>
					<i class="iconfont icon-dakajieguo_cuotishuyidati iconBg"></i>
				</div>
				<div class="orgGrad">
					<div class="dailyAnalyTop">
						<i class="iconfont icon-dakajieguo_zhengqueshuai"></i>
						正确率
						<span>(%)</span>
					</div>
					<div class="dailyAnalyNum">{{ (transcript.rightsquescou / transcript.quescou) * 100 }}</div>
					<i class="iconfont icon-dakajieguo_zhengqueshuai iconBg"></i>
				</div>
			</div>
			<!-- 打卡结果 -->
			<div class="dailyTank">
				<div class="detailTit">
					答题卡
					<span>(点击题目序号可跳转到该题)</span>
				</div>
				<div class="cardBtns">
					<div v-for="(item, index) in Question" @click="viewWrong(1, item.number, item)" :class="[item.isCorrect ? 'rightHave' : 'wrongHave']" :key="index">{{ item.number }}</div>
				</div>
			</div>
		</div>
		<!-- 打卡状态 -->
		<div class="dailyTank dailyPra" v-if="show == 1">
			<div class="taskTab">
				<div :class="[tabIndex == 1 ? 'taskTabActive' : '']" @click="taskTab(1)">系统任务</div>
				<div :class="[tabIndex == 2 ? 'taskTabActive' : '']" @click="taskTab(2)">老师任务</div>
			</div>
			<div class="hirstGo" @click="hirstGo">历史记录</div>
			<div class="daillyCon">
				<template v-if="tabIndex == 1">
					<template v-if="sysTask.status == 3">
						<img src="../../assets/taskNone.png" />
						<div class="notNone">你真棒！任务都已做完啦~</div>
					</template>
					<template v-else>
						<h1 style="margin-top: 20px;">{{ sysTask.subName }}</h1>
						<div class="daillyConBot">
							<!-- 	<div class="dailyNode">
								已有
								<span class="blue">{{ sysTask.clockUsers ? sysTask.clockUsers : 0 }}</span>
								人打卡
							</div> -->
							<div class="btn btnGrad" @click="dailyStart(sysTask)">{{ sysTask.status == 1 ? '未打卡' : sysTask.status == 2 ? '进行中' : '已打卡' }}</div>
						</div>
					</template>
				</template>
				<template v-else>
					<template v-if="teaTask.length == 0">
						<img src="../../assets/priceNone.png" />
						<div class="notNone">暂无任务哟~</div>
					</template>
					<template v-else>
						<template v-if="stuTaskNum == teaShow.length">
							<img src="../../assets/taskNone.png" />
							<div class="notNone">你真棒！任务都已做完啦~</div>
						</template>
						<template v-else>
							<h1>{{ teaTask[teaTaskIndex].taskType == 1 ? teaTask[teaTaskIndex].paperName : teaTask[teaTaskIndex].subName }}</h1>
							<h3>{{ teaTask[teaTaskIndex].taskType == 2 ? teaTask[teaTaskIndex].chapterName : '' }}</h3>
							<div class="daillyConBot">
								<!-- <div class="dailyNode">
									已有
									<span class="blue">{{ teaTask[teaTaskIndex].clockUsers ? teaTask[teaTaskIndex].clockUsers : 0 }}</span>
									人打卡
								</div> -->
								<div class="btn btnGrad" @click="dailyStart(teaTask[teaTaskIndex])">
									{{ teaTask[teaTaskIndex].status == 1 ? '未打卡' : teaTask[teaTaskIndex].status == 2 ? '进行中' : '已打卡' }}
								</div>
							</div>
							<!-- 左右箭头 -->
							<div class="optionBtnTask button-prev" @click="lastClick" v-if="teaTaskIndex != 0">
								<div><i class="iconfont icon-jiantou_mianbaoxiedaohang"></i></div>
							</div>
							<div class="optionBtnTask button-next" @click="nextClick" v-if="teaTaskIndex != teaTask.length - 1">
								<div><i class="iconfont icon-jiantou_mianbaoxiedaohang"></i></div>
							</div>
						</template>
					</template>
				</template>
			</div>
		</div>
		<!-- 历史记录 -->
		<div class="histList" v-if="show == 13">
			<div class="tabs" style="position: relative;">
				<div :class="{ active: histIndex == 1 }" @click="histIndex = 1">系统任务</div>
				<div :class="{ active: histIndex == 2 }" @click="histIndex = 2">老师任务</div>
				<div class="tabsOption" v-if="show == 13 && paperList.length != 0">
					<div v-if="batchShow">
						<input class="checkAll" type="checkbox" @click="checkAll" v-model="checkedAll" />
						<span>全选</span>
					</div>
					<div @click="batchShow = true" v-if="!batchShow">
						<i class="iconfont icon-piliangshanchu"></i>
						<span>批量删除</span>
					</div>
					<div @click="paperDel()" v-else>
						<i class="iconfont icon-querenshanchu"></i>
						<span>删除</span>
					</div>
				</div>
			</div>
			<Empty v-if="show == 13 && paperList.length == 0" text="暂无记录"></Empty>
			<div class="paperList" v-for="(item, index) in paperList" :key="index">
				<div class="checkList" v-if="batchShow"><input v-model="item.checked" class="boxCheck" type="checkbox" /></div>
				<div @click="dailyView(item)">
					<h1>{{ item.paperName }}</h1>
					<div class="item_a">
						<span>
							<i class="iconfont icon-shijian"></i>
							&nbsp;交卷时间：{{ item.endTime }}
						</span>
						<span>
							<i class="iconfont icon-shuliang"></i>
							&nbsp;错题数量：{{ item.errorQueCou }}
						</span>
						<span>
							<i class="iconfont icon-haoshi"></i>
							&nbsp;耗时：{{ item.duration }}
						</span>
					</div>
				</div>
				<div class="item_b" @click="dailyView(item)">
					<div class="danger item_score">{{ item.rights }}%</div>
				</div>
			</div>
			<PgCom v-if="total > pageSize" :total="total" :pageNo="pageNo" :pageSize="pageSize" @pageNoChange="pageNoChange"></PgCom>
		</div>
		<Popup v-if="clearModalShow" :mold="1" :btnTxt="['取消', '删除']" @closeClick="cancelClick" @cancelClick="cancelClick" @configClick="submitBtn">
			<div slot="modalSlot">是否要删除已选任务？</div>
		</Popup>
		<Popup v-if="subModalShow2" :mold="2" title="正在删除,请稍等..."></Popup>
		<Popup v-if="delWarn" :mold="3" title="请选择需要删除的任务"></Popup>
		<answer
			ref="answer"
			v-if="show == 11"
			@sumitSucess="sumitSucess"
			:CorrectCount="correctCount"
			:ErrorCount="errorCount"
			:Question="Question"
			:CountVO="CountVO"
			:Formalexam="Formalexam"
			:isCountDown="false"
			:isRecitation="isRecitation"
			:isCorrecting="isCorrecting"
			:topicNumber="curDetails.number"
			:Paper="curDetails"
			:isClock="1"
			updateHis="updateExamHistory"
		></answer>
	</div>
</template>

<script>
import exam from '../../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			show: 1, //展示
			details: {}, //传递试卷信息
			curDetails: {}, //当前详情
			taskName: [], //打卡名
			teaShow: [], //老师显示任务
			paperName: [], //打卡错题集名
			crumbsItem: [{ name: '每日一练', url: 1 }], //面包屑导航
			CountVO: {}, //题卡
			Question: [], //题目
			correctCount: 0, //正确数量
			errorCount: 0, //错误数量
			isRecitation: false, //是否背题模式
			isCorrecting: false, //是否批改题目
			transcript: {}, //成绩页面
			Formalexam: false,
			sysTask: {}, //系统任务
			teaTask: [], //老师任务
			stuTaskNum: 0, //学生打卡老师任务数量
			teaTaskIndex: 0, //老师任务第一个
			tabIndex: 1, //当前
			histIndex: 1, //考试列表切换
			paperList: [], //试卷列表
			pageNo: 1,
			pageSize: 8,
			total: 0, //总条数
			checkedAll: false,
			detailUpid: 0,
			batchShow: false, //全选框是否显示
			delWarn: false, //是否可以删除
			subModalShow2: false, //删除中提示
			clearModalShow: false //删除确定提示
		};
	},
	watch: {
		histIndex() {
			//历史列表切换监听
			this.pageNo = 1;
			this.getPaper();
		}
	},
	created() {
		this.getDetails();
	},
	mounted() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	destroyed() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	methods: {
		cancelClick() {
			this.paperList.forEach(item => {
				item.checked = false;
			});
			this.batchShow = false;
			this.clearModalShow = false;
		},
		submitBtn() {
			// 确定删除
			let ids = [];
			this.paperList.map(item => {
				if (item.checked) {
					ids.push(item.id);
				}
			});
			const pageData = {
				ids,
				type: this.histIndex
			};
			this.subModalShow2 = true;
			this.clearModalShow = false;
			this.axios.post('/web/student/student/mine/deleteTaskHistory', pageData).then(() => {
				this.subModalShow2 = false;
				this.batchShow = false;
				this.getPaper();
			});
		},
		paperDel() {
			//删除按钮操作
			let choseNum = 0;
			this.paperList.map(item => {
				if (item.checked) {
					choseNum++;
				}
			});
			if (choseNum == 0) {
				//如果没有选择数据
				this.delWarn = true;
				setTimeout(() => {
					this.delWarn = false;
				}, 1000);
				return;
			}
			this.clearModalShow = true;
		},
		checkAll() {
			//全选
			this.checkedAll = !this.checkedAll;
			this.paperList.forEach(item => {
				item.checked = this.checkedAll;
			});
		},
		//页码切换
		pageNoChange(val) {
			this.pageNo = val;
			this.getPaper();
		},
		hirstGo() {
			//进入历史记录列表
			this.show = 13;
			this.batchShow = false;
			this.setCrumbs('历史记录', 13);
			this.getPaper();
		},
		taskTab(type) {
			// 切换选项卡
			this.tabIndex = type;
		},
		lastClick() {
			// 上一页
			if (this.teaTaskIndex != 0) {
				this.teaTaskIndex--;
			}
		},
		nextClick() {
			// 下一页
			if (this.teaTaskIndex != this.teaTask.length - 1) {
				this.teaTaskIndex++;
			}
		},
		beforeunloadHandler(e) {
			e = e || window.event;
			if (this.show == 11) {
				if (e) {
					e.returnValue = '正在更新数据';
				}
				this.$refs.answer.updateHistoryHander('updateExamHistory');
				return;
			}
		},
		crumbsClick(type) {
			if(this.show==11){
				setTimeout(()=>{
					this.getDetails()
				},500)
			}
			//导航切换事件
			this.show = type;
			if (type == 1) {
				this.crumbsInit();
			} else if (type == 13) {
				this.crumbsInit();
				this.setCrumbs('历史记录', 13);
			}
		},
		// 获取试卷错题
		getPaper() {
			// this.papers = [];
			const pageData = {
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				type: this.histIndex
			};
			this.axios.post('/web/student/student/mine/getTaskHistoryList', pageData).then(res => {
				this.paperList = res.list;
				this.paperList.forEach(item => {
					item.checked = false;
				});
				this.total = res.total;
			});
		},
		// 获取科目
		getDetails() {
			this.stuTaskNum = 0;
			this.axios.get('/web/student/student/mine/getUserClockDetail').then(res => {
				this.details = res;
				this.sysTask = res.sysTask; //系统任务
				this.teaShow = res.teaTask;
				this.teaTask = [];
				for (let i = 0; i < res.teaTask.length; i++) {
					if (res.teaTask[i].status != 3) {
						this.teaTask.push(res.teaTask[i]); //老师任务
					} else {
						this.stuTaskNum++;
					}
				}
			});
		},
		crumbsInit() {
			// 导航默认
			this.crumbsItem = [{ name: '每日一练', url: 1 }];
			this.teaTaskIndex = 0;
			this.getDetails();
		},
		setCrumbs(name, url) {
			let navLi = {
				name: name,
				url: url
			};
			this.crumbsItem.push(navLi);
		},
		sumitSucess(e) {
			//交卷成功
			this.crumbsInit();
			this.show = 2;
			this.curDetails.status = 2;
			this.getDetails();
			this.curDetails.upid = e;
			this.skipResult(this.curDetails);
		},
		// 成绩页面跳转
		skipResult(e) {
			let val1 = e.upid,
				val2 = '打卡结果';
			this.setCrumbs(val2, 2);
			let pageSkip = {
				upid: e.upid,
				isCorrect: 1,
				paperid: e.paperId
			};
			this.axios
				.get('/web/student/home/getlookBackQuestion', {
					params: pageSkip
				})
				.then(res => {
					this.Question = res.exercisesQuestion;
					this.CountVO = res.appSingMultTrueCountVO;
				});
			// 展示成绩页
			this.show = 2;
			this.axios
				.get('/web/student/home/getTranscript', {
					params: {
						upid: val1
					}
				})
				.then(res => {
					this.transcript = res;
					this.correctCount = this.transcript.rightsquescou;
					this.errorCount = this.transcript.errorsquescou;
				});
		},
		dailyView(item) {
			this.curDetails = item;
			//查看成绩
			this.skipResult(item);
		},
		dailyStart(item) {
			this.curDetails = item;
			if (item.status == 3) {
				this.skipResult(item);
				return;
			} //已打卡模式返回
			const pageData = {
				paperid: item.paperId,
				isClock: 1,
				duration: item.duration
			};
			this.setCrumbs(item.subName, 11);
			this.isRecitation = false; //不是背题模式
			this.isCorrecting = false;
			this.Formalexam = true;
			// 开始答题
			this.startAnswer(pageData);
		},
		viewWrong(e, number, item) {
			const pageData = {
				paperid: item.paperId,
				upid: this.curDetails.upid,
				isCorrect: e
			};
			// 查看错题
			this.Formalexam = false;
			this.isRecitation = true;
			this.isCorrecting = true;
			this.curDetails.number = number;
			this.viewWrongTopic(pageData);
		}
	}
};
</script>

<style scoped>
.checkList {
	height: 100%;
	float: left;
	width: 54px;
	display: flex;
	align-items: center;
}
.checkList input:checked + label:before {
	content: '\2713';
	transform: scale(0.3);
}
.tabsOption {
	position: absolute;
	right: 0;
	display: flex;
	justify-content: flex-end;
	width: auto !important;
}
.tabsOption div {
	width: auto !important;
	margin-right: 30px !important;
}
.tabsOption span {
	font-size: 16px;
	margin-left: 9px;
	color: #636874;
}
.checkAll {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}
.boxCheck {
	width: 24px;
	height: 24px;
	border: 2px solid #3f7bf2;
	border-radius: 6px;
}
.notNone {
	font-size: 18px;
	color: #475266;
}
.hirstGo {
	width: 94px;
	height: 36px;
	line-height: 36px;
	float: right;
	color: #f45c4b;
	text-align: center;
	border: 1px solid #f45c4b;
	border-radius: 19px;
	position: absolute;
	top: 19px;
	right: 30px;
	font-size: 16px;
}
.optionBtnTask {
	position: absolute;
	top: 161px;
}
.button-prev {
	left: 30px;
	transform: rotate(180deg);
}
.button-next {
	right: 30px;
}
.optionBtnTask div {
	background: #f5f5f5;
	width: 46px;
	height: 46px;
	border-radius: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #a6a6a6;
}
.dailyAnaly {
	display: flex;
	justify-content: space-between;
	margin: 40px auto;
}
.dailyPra {
	width: 876px;
	margin: 0 auto;
}
.dailyAnaly > div {
	width: 272px;
	height: 130px;
	padding: 20px;
	position: relative;
	border-radius: 20px;
	color: #fff;
	font-size: 18px;
	box-shadow: 0px 0px 18px 0px rgba(50, 67, 108, 0.12);
}
.dailyAnalyTop .iconfont {
	font-size: 18px;
	margin-right: 12px;
}
.popGrad .iconBg {
	background-image: linear-gradient(to right, #a588ff, #a78cff);
}
.blueGrad .iconBg {
	background-image: linear-gradient(to right, #5a8afa, #5586fa);
}
.orgGrad .iconBg {
	background-image: linear-gradient(to right, #faba43, #fcc962);
}
.iconBg {
	font-size: 72px;
	position: absolute;
	right: 16px;
	bottom: 16px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dailyAnalyTop span {
	opacity: 0.6;
}
.dailyAnalyNum {
	font-size: 42px;
	text-align: center;
	margin-top: 20px;
}
.dailyTank {
	border-radius: 20px;
	box-shadow: 0px 0px 18px 0px rgba(50, 67, 108, 0.12);
	padding: 25px;
	height: 368px;
	position: relative;
}
.daillyCon {
	text-align: center;
	line-height: 40px;
	margin-top: 50px;
}
.daillyCon > h1 {
	font-size: 24px;
	color: #363940;
}
.daillyCon > h3 {
	height: 40px;
	font-size: 20px;
	color: #6b7180;
	font-weight: normal;
}
.daillyConBot {
	margin-top: 60px;
	font-size: 20px;
	color: #a6a6a6;
}
.daillyConBot .btn {
	margin-top: 28px;
	margin-bottom: 65px;
}
</style>
.popGrad .iconBg{background-image:-webkit-linear-gradient(to right, #A588FF, #A78CFF);}
